<template>
	<div class="classlist">
		<div class="list-wrap" v-if="movieslist.length>0">
			<div class="movies">
				<div class="movies-list">
					<router-link :to="`/moviepage/${item.movieId}`" class="item" v-for="item in movieslist"
						:key="item.movieId">
						<div class="movie">
							<div class="avatar">
								<img :src="item.poster">
							</div>
							<div class="movie-info">
								<div class="title line-ellipsis" v-if="item.movieInfo.title!=''">
									{{item.movieInfo.title}}
								</div>
								<div class="english-title line-ellipsis" v-if="item.movieInfo.englishTitle!=''">
									{{item.movieInfo.englishTitle}}
								</div>
								<div class="actors line-ellipsis" v-if="item.movieInfo.actors!=''">
									{{item.movieInfo.actors}}
								</div>
								<div class="show-info line-ellipsis" v-if="item.movieInfo.showInfo!=''">
									{{item.movieInfo.showInfo}}
								</div>
							</div>
							<div class="movie-score">
								<div class="score line-ellipsis" v-if="item.score!=''">
									<span class="grade">{{item.score}}</span>
									<span>分</span>
								</div>
							</div>
						</div>
					</router-link>

				</div>
			</div>
		</div>
		<div class="more" @click="showMore()" v-if="movieslist.length>0">
			<div class="loader-wrap">
				<span>{{this.limit >=100? "已经到底了":"加载更多"}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				movieslist: [],
				limit: 10,
			}
		},
		created() {
			this.getMovies()
		},
		mounted() {

		},
		methods: {
			async getMovies() {
				let re = await this.$axios.get("/index/moreClassicList?sortId=1&showType=3&limit=" + this.limit +
					"&offset=0")
				this.movieslist = re
				// console.log(this.movieslist)
			},

			showMore() {
				if (this.limit >= 100) {
					return
				}
				this.limit += 10;
				this.getMovies()
			},

		},
		computed: {

		}
	}
</script>

<style scoped lang="less">
	.classlist {
		.list-wrap {
			background-color: #f5f5f5;
		}
	}

	.movies {
		padding-top: 14.5px;
		background-color: #fff;

		.item {
			display: block;
			color: #666;
		}
	}

	.movie {
		position: relative;
		margin: 0 0 20px 20px;
		display: flex;
		align-items: flex-start;

		.avatar {
			display: inline-block;

			img {
				width: 66px;
				height: 94px;
			}
		}

		.movie-info {
			margin-left: 10px;
			display: inline-block;
			color: #666;
			height: 100%;
			flex: 1;
			overflow: hidden;
			font-size: 13px;
			line-height: 18px;

			div {
				margin-bottom: 4px;
				color: #666;
				font-size: 13px;
			}

			.title {
				font-size: 17px;
				line-height: 24px;
				color: #333;
				font-weight: 700;
			}
		}

		.movie-score {
			width: 60px;
			height: 17px;
			font-size: 12px;
			color: #999;
			line-height: 17px;
			display: inline-block;
			text-align: center;

			span {
				font-size: 12px;
			}

			.grade {
				color: #faaf00;
				font-size: 15px;
			}

		}
	}

	.line-ellipsis {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.more {
		line-height: 40px;
		height: 40px;
		text-align: center;
	}

	.loader-wrap {
		text-align: center;
		line-height: 40px;
	}
</style>
